<template>
    <div class='orderlsit'>
        <!-- 订单列表开始 -->
        <div class='list_box' v-for='lists in shop' :key='lists.id'>
            <!-- 订单列表头部/商店信息及状态 -->
          <h1 class='list_top'>
            <div class='list'>
                <p class='shopname'>{{lists.shoptitle}}-{{lists.shoplocation}}店></p>
                <p class='shopstatus'>{{lists.shopstatus}}</p>
                <span class='shoptime'>{{lists.dtime}}
                    {{lists.htime}}
                </span>
            </div>
          </h1>   
          <!-- 订单列表中部/商品图片/价格/数量 -->
          <div class='list_body'>
            <div class='listall'>
                <li class='list_body_left' v-for='lists in lists.img' :key='lists.id'>
                    <img :src='lists.imgsrc' alt=''>
                </li>
                <img class='disc' src='/static/headermore.png'>
            </div>
            <div class="nz o4"></div>
            <div class='list_body_right'>
                    <span class='shop_price'>￥{{lists.price}}</span>
                    <span class='shop_sum'> 共{{lists.sum}}件</span>
                    <span class='shop_transform'>{{lists.transform}}</span>
            </div>
            <div class='list_body_bottom'>
                    再次购买
            </div>
          </div> 
        </div>
        <!-- 列表底部 -->
        <div class='list_bottom'>已显示全部</div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      shop: []
    };
  },
  created() {
    this.orderList();
  },
  methods:{
    //调用商品数据
    orderList() {
        this.$jq.get(this.apiurl + "/shop/orderlist").done(result => {
        this.shop = result.data;
      });
    }
  }
};
</script>
<style scoped>
body{
    background-color: #f4f4f4;
    font-size: normal;
    font-weight: normal
}
p{
    margin:0;
    padding:0
}
.list_box{
    background: #fff;
    width:100%;
    position: relative;
    margin-bottom: 0.6rem;
}
/* 订单顶部 */
.list_top{
    width:96%;
    margin:0 auto;
    position: relative;
}
.list{
    width:100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding:1rem 0;
}
.shopname{
    width:80%;
    text-align: left;
    font-size:0.94rem;
    color:#333;
}
.shopstatus{
    width:20%;
    text-align: right;
}
.shoptime{
    color: #999;
    font-size:0.81rem;
}
.shopstatus,.shoptime{
    font-size:0.81rem;
    font-size: normal;
    font-weight: normal
}
/* list_body的订单 */
.list_body{
    position: relative;
    padding-bottom: 3.6rem;
}
.listall{
    width:96%;
    position: relative;
    margin:auto;
}
.list_body_left{
    width:15%;
    display: flex;
    position: relative;
    display: inline-block;
}
.list_body_left>img{
    width:100%;
    height:100%;
    margin:0.1rem
}
.list_body_right{
    width:20%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    flex-direction: column;
    text-align: right;
    position: absolute;
    top:0;
    right:0.5rem;
    margin-bottom: 1rem;
    
}
.list_body,.list{
    clear: both;
}   

.disc{
    margin-bottom:2rem;
    margin-left:0.5rem;
    width:8%;
}
.shop_price{
    font-size: 0.94rem;
    color: #FF5757;
    height: 1.19rem;
    padding-left: 0.6rem;
}
.shop_sum{
    font-size: 0.8rem;
    color: #666;
    padding-bottom:0.19rem;
}
.shop_transform{
    border:0.1rem solid #16a9ff;
    color: #16a9ff;
    width:60%;
    padding:0.2rem;
    margin-left: 1.15rem;
}
.list_body_bottom{
    border:0.1rem solid #d9d9d9;
    position: absolute;
    bottom:0.5rem;
    right:0.5rem;
    color: #333;
    font-size: 0.8rem;
    padding: 0.4rem
}
/* 底部 */
.list_bottom{
    width:100%;
    font-size:0.875rem;
    color: #3c3c3c;
    text-align: center;
    background: #fff;
    line-height: 2.8rem;
}
</style>
